<h1>
    Bibliotek
</h1>
<div id="reportFrame"></div>
<h2>Billeder</h2>
<fieldset>
    <legend>Upload billeder</legend>
    <div id="fileQueue"></div>
    <br/>
    <input id="upload_button" type="file" name="files[]" />
</fieldset>
<script language="javascript">
    var ts  = {$smarty.now};
    {literal}
    $(document).ready(function()	{

        //Enable editor on textarea
        $('#{/literal}{$identifier}content{literal}').markItUp(mySettings);

        $('#upload_button').uploadify({
            'uploader': 'modules/uploadify/uploadify.swf',
            'script': 'modules/uploadify/uploadify.php?timestamp='+ts,
            'folder': '../!library/images',
            'cancelImg': 'modules/uploadify/cancel.png',
            'queueID'        : 'fileQueue',
            'auto'           : true,
            'multi'          : true,
            'buttonText'    : 'Gennemse',
            'fileDesc': 'Image Files',
            'fileExt': '*.jpg;*.jpeg;*.png;*.gif', 
            'simUploadLimit': 4,
            onSelectOnce: function (){
                busy(true);
            },
            onError: function (event, queueID ,fileObj, errorObj) {
                var msg;
                if (errorObj.status == 404) {
                    alert('Could not find upload script. Use a relative path.');
                    msg = 'Could not find upload script.';
                } else if (errorObj.type === "HTTP")
                    msg = errorObj.type+": "+errorObj.status;
                else if (errorObj.type ==="File Size")
                    msg = fileObj.name+'<br>'+errorObj.type+' Limit: '+Math.round(errorObj.sizeLimit/1024)+'KB';
                else
                    msg = errorObj.type+": "+errorObj.text;
                $.jGrowl('<p></p>'+msg, {
                    theme: 	'error',
                    header: 'ERROR',
                    sticky: true
                });
                $("#fileUploadgrowl" + queueID).fadeOut(250, function() { $("#fileUploadgrowl" + queueID).remove()});
                return false;
            },
            onCancel: function (a, b, c, d) {
                var msg = "Cancelled uploading: "+c.name;
                $.jGrowl('<p></p>'+msg, {
                    theme: 	'warning',
                    header: 'Cancelled Upload',
                    life:	3000,
                    sticky: false
                });
            },
            onClearQueue: function (a, b) {
                var msg = "Cleared "+b.fileCount+" files from queue";
                $.jGrowl('<p></p>'+msg, {
                    theme: 	'warning',
                    header: 'Cleared Queue',
                    life:	3000,
                    sticky: false
                });
            },
            onComplete: function (a, b ,c, d, e) {
                var size = Math.round(c.size/1024);
                $.jGrowl('<p></p>'+c.name+' - '+size+'KB', {
                    theme: 	'success',
                    header: 'Upload Complete',
                    life:	1000,
                    sticky: false
                });
            },
            onAllComplete:function(){
                refreshImages();
                busy(false);
            }
        });

        $('#upload_queue').click(function(){
            $('#upload_button').uploadifyUpload();
        });
    });

    {/literal}
</script>
<br/>
<div>
    <div id="hide_tree_area"><span>Bibliotek</span></div>
    <div id="tree_area">
        <div><span class="tree_header">Billeder</span>
            <div id="tree_list" style="height:auto;">
            </div>
        </div>
    </div>
    <div class="clear"></div>
</div>

<script type="text/javascript">
    var images_url = "{$ALTURL}/modules/LightBox";
    var lib_url = "{$LIBRARYURL}";

    var imageFolders = [];
    var images = [];

    var imagesJsonUrl = "{$library_images_extended_json_url}";
    var imagesExtendedJson = false//JSON.parse('{$library_images_extended_json}');


    {literal}

    function removeGroup(group){
        var groupDeleteString = "?q=command:do;action:library.imagegroup.remove;group:"+group+";ajax;";
        busy(true);
        $.get(groupDeleteString,function(data){
            $('#reportFrame').html(data);
            busy(false);
            refreshImages();
        });
    }
    function renameGroup(group){
        var newName = prompt("Hvad skal gruppen hedde?",group);
        if(newName != null){
            var groupRenameString = "?q=command:do;action:library.imagegroup.rename;group:"+group+"new:"+newName+";ajax;";
            busy(true);
            $.get(groupRenameString,function(data){
                $('#reportFrame').html(data);
                busy(false);
                refreshImages();
            });
        }
    }

    function removeImage(image){
        var imageDeleteString = "?q=command:do;action:library.image.remove;image:"+image+";ajax;";
        busy(true);
        $.get(imageDeleteString,function(data){
            $('#reportFrame').html(data);
            busy(false);
            refreshImages();
        });
    }

    function createImageItem(i,group,item){
        stamp  = new Date(item.timestamp*1000);
        return '<div class="tree_item"><a title="'+item.name+' - '+stamp.format("dd/mm/yyyy")+'" rel="lightbox" href="'+lib_url+'/image.php'+i+'?width=800&height=500&image='+i+'"><img src="'+lib_url+'/image.php'+i+'?width=100&height=100&cropratio=3:2&image='+i+'" alt="'+item.name+'" /></a> <a class="remove btnSkin" href="?q=command:do;action:library.image.remove;image:'+i+';" rel="'+i+'">Fjern</a></div>'
    }
    function createImageFolder(a,g){
        if (g.length == 10 && !isNaN(g)){
            gStamp = new Date(g*1000);
            gStamp = 'Gruppe oprettet: '+gStamp.format("dd/mm/yyyy - HH:MM:ss");
        }else{
            gStamp = g;
        }
        var retStr = '<div class="tree_item_folder" ><div title="'+gStamp+'" class="tree_item_folder_icon">&nbsp;&nbsp;<strong>'+gStamp+'</strong><div class="expCol">&nbsp;[ + / - ]&nbsp;</div>&nbsp;<span class="removeGroup" rel="'+g+'">&nbsp;Slet gruppe &nbsp;</span><span class="renameGroup" rel="'+g+'">&nbsp;Omdøb gruppe &nbsp;</span></div><div class="tree_item_folder_container">';
        $.each(a,function(key,item){
            retStr +=  createImageItem(item.src,g,item);
        });
        retStr += '</div></div>';
        return retStr;
    }

    function imagesJSONRefresh(callback){
        $.getJSON(imagesJsonUrl,function(data,status){
            imagesExtendedJson = data;

            callback();
        });
    }

    function imagesGalleryUpdate(callback){
        $('#tree_list').empty();
        $.each(imagesExtendedJson,function(key,item){
            $('#tree_list').append(createImageFolder(item,key));
        });
        callback();
    }

    function attachImageEvents(){

        $('.tree_item_folder_container').hide();
        $('.tree_item_folder_icon .expCol').click(function(){
            $(this).parent().next('.tree_item_folder_container').toggle(200);
        });

        $('.tree_item_folder_icon .expCol').disableSelection();
        $('a[rel*=lightbox]').lightBox({
            overlayBgColor: '#222',
            overlayOpacity: 0.5,
            imageLoading: images_url+'/images/lightbox-ico-loading.gif',
            imageBtnClose: images_url+'/images/lightbox-btn-close.gif',
            imageBtnPrev: images_url+'/images/lightbox-btn-prev.gif',
            imageBtnNext: images_url+'/images/lightbox-btn-next.gif',
            imageBlank: images_url+'/images/lightbox-blank.gif',
            containerResizeSpeed: 200,
            txtImage: 'Billede',
            txtOf: 'af',
            keyToPrev:",",
            keyToNext:"."
        });

        $('.tree_item .remove').each(function(i,el){
            $(this).click(function(e){
                e.preventDefault();
                if(confirm("er du sikker på at du vil slette dette billede?")){
                    var image = $(this).attr('rel');
                    removeImage(image);
                }
            });

            var workingElement = $(el);
            workingElement.hide();
            workingElement.parent().hover(function(){
                workingElement.show(100);
            },function(){
                workingElement.hide(100);
            });
        });

        $('.tree_item_folder .removeGroup').click(function(e){
            e.preventDefault();
            if(confirm("er du sikker på at du vil slette denne gruppe?")){
                var group = $(this).attr('rel');
                removeGroup(group);
            }
        });

        $('.tree_item_folder .renameGroup').click(function(e){
            e.preventDefault();
            if(confirm("er du sikker på at du vil omdøbe denne gruppe?")){
                var group = $(this).attr('rel');
                renameGroup(group);
            }
        });

    }

    function refreshImages(){
        imagesJSONRefresh(function(){
            imagesGalleryUpdate(function(){
                attachImageEvents();
            });
        });
    }

    $(function(){

        refreshImages();

        $('#tree_list').css({width:'100%'});
        $('#hide_tree_area').disableSelection();

    });

</script>
{/literal}